@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
@endsection
@section('scripts')
    <script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入新密码'));
                    } else if (value !== this.form.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    form: {
                        password_old: '',
                        password: '',
                        password_confirmation: '',
                        _token:"{{csrf_token()}}"
                    },
                    rules: {
                        password_old: [{ required: true, message: '请填写旧密码', trigger: 'blur'}],
                        password: [{ required: true, message: '请填写新密码', trigger: 'blur'},{ min: 6, message: '密码的长度不能小于6位', trigger: 'blur' }],
                        password_confirmation: [{ validator: validatePass, trigger: 'blur' }],
                    },
                }
            },
            methods: {
                update() {
                    let that = this;
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            $.post("{{ route('user.index.password') }}",this.form,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        message: '重置密码成功',
                                        type: 'success'
                                    });
                                    setTimeout(function(){
                                        window.location.href = "{{ route('user.index.index') }}";
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
            }
        });
    </script>
@endsection
@section('content')
    @include('user.layout.head')
    <div class="container main">
        <div class="row">
            <div class="col-lg-2 user-left">
                @include('user.layout.left')
            </div>
            <div class="col-lg-10 main-list-item user-right" id="app" v-cloak>
                <div class="user-right-note">修改密码</div>
                <div class="col-lg-12 user-right-info">
                    <el-form :model="form" ref="form" :rules="rules" status-icon label-position="top" class="login-form">
                        <el-form-item label="旧密码：" required prop="password_old">
                            <el-input type="password" clearable v-model="form.password_old" placeholder="请填写旧密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码：" required prop="password">
                            <el-input type="password" clearable v-model="form.password" placeholder="请填写新密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码：" required prop="password_confirmation">
                            <el-input type="password" clearable v-model="form.password_confirmation" placeholder="请再次输入新密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <div class="form-submit text-center">
                            <el-button type="primary" style="width: 150px" @click="update()">保存提交</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
@endsection

